<template>
  <div>
    <el-form ref="attrForm" :model="attr" :rules="rules">
      <el-form-item label="属性名" label-width="80px" prop="attrName">
        <el-input v-model="attr.attrName" placeholder="请输入属性名" style="width: 400px" />
      </el-form-item>
      <el-form-item style="margin:20px 0">
        <el-button :disabled="!attr.attrName" type="primary" icon="el-icon-plus" @click="addAttrValue">添加属性值</el-button>
      </el-form-item>
      <el-form-item prop="attrValueList">
        <el-table border :data="attr.attrValueList">
          <el-table-column width="80" align="center" label="序号" type="index" />
          <el-table-column label="属性值名称">
            <template v-slot="{row,$index}">
              <el-input :ref="$index" v-model="row.valueName" size="mini" placeholder="请输入详细属性值" @blur="isDelCurrentValue(row,$index)" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{$index}">
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="delOneAttr($index)" />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item style="margin-top: 20px">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="$emit('update:visible', true)">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { reqSaveAttrInfo } from '@/api/product/attr'
import { mapState } from 'vuex'
export default {
  name: 'SaveAttr',
  props: {
    attrValue: {
      type: Object,
      default: () => ({
        attrName: '',
        attrValueList: []
      })
    }
  },
  data() {
    var validateAttrValueList = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error('请至少输入一项属性值'))
        return
      }
      if (!value[value.length - 1].valueName) {
        this.$refs[this.attr.attrValueList.length - 1].focus()
        callback(new Error('请添加属性值'))
        return
      }
      callback()
    }
    return {
      attr: this.attrValue,
      rules: {
        attrName: [{ required: true, message: '请输入属性名', trggier: 'blur' }],
        attrValueList: [{ required: true, validator: validateAttrValueList }]
      }
    }
  },
  computed: {
    ...mapState('category', ['category3Id'])
  },
  methods: {
    // 3.失去焦点是否删除
    isDelCurrentValue(row, index) {
      if (!row.valueName) {
        this.attr.attrValueList.pop()
      }
    },
    // 2.删除一项属性值
    delOneAttr(index) {
      this.attr.attrValueList.splice(index, 1)
    },
    // 1.添加属性值
    addAttrValue() {
      this.attr.attrValueList.push({
        valueName: ''
      })
      this.$nextTick(() => {
        this.$refs[this.attr.attrValueList.length - 1].focus()
      })
    },
    // 单击确定按钮时的校验
    submitForm() {
      this.$refs.attrForm.validate(async(valid) => {
        if (valid) {
          const { attrName, attrValueList, id } = this.attr
          const { category3Id } = this
          const result = await reqSaveAttrInfo({
            attrName,
            attrValueList,
            categoryId: category3Id,
            categoryLevel: 3,
            id
          })
          if (result.code === 200) {
            // 提示添加成功
            this.$message({
              type: 'success',
              message: `${id ? '修改' : '添加'}属性成功`
            })
            // 跳转到之前的列表页面
            this.$emit('update:visible', true)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style>

</style>
